<template>
	<view>
		<view class="listitem" v-for="entry in entries" :key="entry.index">
		    <view class="line"></view>
		    <view class="listinner">
		        <view style="padding-left: 10px;">在{{entry.date}}{{entry.type}}了{{entry.amount}}</view>
		        <view class="flexspace"></view>
		        <button type="warn" style="height: 40px;line-height: 40px;" v-on:click="deleteEntryAt(entry.index)">删除记录</button>
		    </view>
		            
		</view>
	</view>
</template>

<script>
	var NC = require("../../../common/common.js");
	function successmsg(msg){
		uni.showToast({
			icon:"success",
			title:msg
		});
		
	}
	
	var reloadData = null;
	
	export default {
		data() {
			return {
				entries:[]
			}
		},
		onShow() {
			this.loadData();
			reloadData=this.loadData;
		},
		methods: {
			loadData:function(){
				NC.NextCalc.loadState();
				var entries=[];
				for (let index = 0; index < NC.NextCalc.entrySequence.length; index++) {
				    const element = NC.NextCalc.entrySequence[index];
				    var entry={};
				    entry.type="";
				    if(element.type==0){
				        entry.type="吃饭消费";
				    }
				    if(element.type==1){
				        entry.type="其他消费";
				    }
				    entry.index=index;
				    entry.date=NC.dateFormat("yyyy-MM-dd HH:mm",element.date);
				    entry.amount=element.amount;
				    entries.push(entry);
				}
				this.entries = entries;
			},
			deleteEntryAt:function(num){
				uni.showModal({
					title:"确认删除",
					content:"是否删除这一条数据?",
					confirmColor:"#ff0000",
					cancelColor:"#000000",
					confirmText:"删除",
					cancelText:"取消",
					success:function(result) {
						if(result.confirm){
							NC.NextCalc.entrySequence.splice(num,1);
							NC.NextCalc.saveState();
							successmsg("删除成功");
							reloadData();
						}
					}
				})
		
			}
		}
	}
</script>

<style>
		.listitem{
            height: 50px;
			
        }
		.listinner{
			height: 50px;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
        .content{
            margin-left: 10px;
        }
        .line{
            width:100%;
            height: 1px;
            background-color: rgb(184, 179, 226);
        }
		.flexspace{
			flex-grow: 1;
		}
</style>
